<template>
  <div class="login-container">
    <h2 class="login-title">智慧会议管理平台</h2>
    <p class="login-subtitle">Smart Conference Management Platform</p>

    <el-tabs v-model="activeTab" class="demo-tabs">
      <el-tab-pane label="账号密码登录" name="account">
        <!-- 账号密码登录表单 -->
        <el-form ref="accountFormRef" :model="accountForm" :rules="accountRules">
          <el-form-item label="" prop="userName">
            <el-input v-model="accountForm.userName" placeholder="账号:" />
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input v-model="accountForm.password" placeholder="密码:" show-password />
          </el-form-item>
          <el-form-item label="" prop="code">
            <el-row :gutter="20">
              <el-col :span="16">
                <el-input v-model="accountForm.code" placeholder="验证码:" />
              </el-col>
              <el-col :span="8">
                <el-button :disabled="false" @click="generateFourDigitCode" style="width: 100px;">{{
                  accountForm.ShowCode
                }}</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="verificationCode">
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="accountForm.autoLogin">自动登录</el-checkbox>&emsp;
            <el-link type="primary" style="float: right;">忘记密码</el-link>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%;" @click="submitAccount(accountFormRef)">登录</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="手机号登录" name="phone">
        <!-- 手机号登录表单 -->
        <el-form ref="phoneFormRef" :model="phoneForm" :rules="phoneRules">
          <el-form-item label="" prop="phone">
            <el-input v-model="phoneForm.phone" placeholder="手机号" prefix-icon="user" />
          </el-form-item>
          <el-form-item label="" prop="code2">
            <el-row :gutter="20">
              <el-col :span="16">
                <el-input v-model="phoneForm.code2" placeholder="验证码" prefix-icon="lock" />
              </el-col>
              <el-col :span="8">
                <el-button :disabled="false" @click="sendVerificationCode" style="width: 100px;">{{ phoneForm.shwpCode2
                }}</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="phoneForm.autoLogin2">自动登录</el-checkbox>&emsp;
            <el-link type="primary" style="float: right;">忘记密码</el-link>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%;" @click="submitFormPhone(phoneFormRef)">登录</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>


    <el-link type="primary" style="float: right;">注册账户</el-link>

  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { accountLogin, phoneLogin } from '@/api/user'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'

const router = useRouter()
const activeTab = ref('phone')

//#region  账密登录
const accountFormRef = ref<FormInstance>()
const accountForm = reactive({
  userName: '',//账号
  password: '',//密码
  ShowCode: '获取验证码',//验证码
  autoLogin: false,//自动登录
  code: '',//获取验证码
})
//验证
const accountRules = reactive<FormRules>({
  userName: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
  ],
})
//账密登录
const submitAccount = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;

  try {
    await formEl.validate(async (valid, fields) => {
      if (!valid) {
        console.log('error submit!', fields);
        return;
      }
      if (accountForm.ShowCode !== accountForm.code) {
        ElMessage.error('验证码错误');
        return;
      }
      const phoneRequest = await accountLogin({
        UserName: accountForm.userName,
        Password: accountForm.password
      })
      if (phoneRequest.data.code == 200) {
        ElMessage.success('登录成功');
        router.push('/Index');
        localStorage.setItem('token', "Bearer " + phoneRequest.data.data.token);
      }
    });
  } catch (error) {
    console.error(error);
  }

}
//重置账密登录表单
const resetFormAccount = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
//生成4位数验证码
const generateFourDigitCode = () => {
  accountForm.ShowCode = Math.random().toString().substring(2, 6)
}



//#endregion

// //#region  手机号登录
const phoneFormRef = ref<FormInstance>()
const phoneForm = reactive({
  phone: '',//手机号
  shwpCode2: '获取验证码',//验证码
  code2: '',//获取验证码 
  autoLogin2: false,//自动登录
})
//验证
const phoneRules = reactive<FormRules>({
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
  ],
  code2: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
  ],
})

//手机号登录
const submitFormPhone = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  try {
    await formEl.validate(async (valid, fields) => {
      if (!valid) {
        console.log('error submit!', fields);
        return;
      }

      if (phoneForm.shwpCode2 !== phoneForm.code2) {
        ElMessage.error('验证码错误');
        return;
      }
      const phoneRequest = await phoneLogin(phoneForm.phone);
      if (phoneRequest.data.code == 200) {
        ElMessage.success('登录成功');
        router.push('/Index');
        localStorage.setItem('token', "Bearer " + phoneRequest.data.data.token);
      }
    });
  } catch (error) {
    console.error('登录失败:', error);
  }
}
//重置手机登录表单
const resetFormPhone = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

//生成4位数验证码
const sendVerificationCode = () => {
  phoneForm.shwpCode2 = Math.random().toString().substring(2, 6)
}

// //#endregion

</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  /* 宽度占满整个视口宽度 */
  min-height: 100vh;
  /* 最小高度为视口高度 */
  margin: 0;
  /* 去除默认的边距 */
  padding: 0;
  /*  去除默认的填充 */
  background: url('@/assets/image/login-bg.jpg') no-repeat center center fixed;
  background-size: cover;
  /* 背景图覆盖整个容器，保持比例 */
  background-position: center;
  /* 居中显示 */
  background-repeat: no-repeat;
  /* 不重复 */
  overflow: hidden;
  /* 隐藏超出内容，防止滚动条 */
}

.login-title {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.login-subtitle {
  font-size: 1rem;
  color: #fff;
  margin-bottom: 2rem;
}

.demo-tabs {
  width: 350px;
}

.other-login-methods {
  display: flex;
  align-items: center;
  margin-top: 1rem;
}

.other-login-methods span {
  margin-right: 1rem;
}
</style>